<template>
	<view>
		<block v-for="(item,index) in pageData" :key="index">
			<navBar :title="item.compCont.title" :bgColor="item.compCont.bgColor" :color="item.compCont.color"
				:searchShow="item.compCont.search"
				v-if="(item.compCont.style == 1 || (item.compCont.style == 2 && isShow)) && item.type == 'header'"
				isTabbar>
			</navBar>

			<!-- 搜索图标-顶部导航配置 -->
			<view class="search flexac white" :style="{'background-color':item.compCont.searchBgColor, top}"
				@click="$pop.toSearch" v-if="item.type == 'header' && item.compCont.search">
				<view class="iconfont icon-sousuokuang1 white size28"></view>
			</view>

			<Bannel v-if="item.type == 'banner'" :pageData="item.compCont" :searchData="item.searchData"
				:isImmerse="pageData[0].compCont.style"></Bannel>
			<tabItem v-if="item.type == 'nav'" :pageData="item.compCont"></tabItem>
			<searchBor v-if="item.type == 'search'" :pageData="item.compCont"></searchBor>
			<coupon v-if="item.type == 'coupon'" :pageData="item.compCont"></coupon>
			<VideoList v-if="item.type == 'video'" :pageData="item.compCont"></VideoList>
			<notice v-if="item.type == 'notice'" :pageData="item.compCont"></notice>
			<product v-if="item.type == 'goodsDisplay'" :pageData="item.compCont"></product>
			<adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
			<fromList v-if="item.type == 'form'" :title="item.title" :pageData="item.compCont"></fromList>
			<textTitle v-if="item.type == 'text'" :pageData="item.compCont"></textTitle>
			<parseContent v-if="item.type == 'richText'" :pageData="item.compCont"></parseContent>
			<tabs v-if="item.type == 'goodsGroup'" :pageData="item.compCont" ref="tabs"></tabs>
			<ArticleList v-if="item.type == 'article'" :title="item.title" :pageData="item.compCont" ref="article"></ArticleList>
			<divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
			<hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
			<seckill v-if="item.type == 'seckill'" :pageData="item.compCont"></seckill>
			<groupBuy v-if="item.type == 'groupBuy'" :pageData="item.compCont"></groupBuy>
			<practice v-if="item.type == 'answer'" :pageData="item.compCont"></practice>
			<courseList v-if="item.type == 'study'" :pageData="item.compCont"></courseList>
			<store v-if="item.type == 'store'" :pageData="item.compCont"></store>
		</block>
		
		<contact v-if="pageData && pageData.length"></contact>

		<view class="content" v-if="showPop">
			<view class="advertising">
				<image :src="$imgUrls(beginData.start_img) " mode="aspectFill"></image>
			</view>
			<view class="fiexd_bottom flexac black size26" @click="toPage">
				<text class="m-right4">跳过</text>
				<text>{{cudTime}}</text>
				<text class="m-left4">S</text>
			</view>
		</view>

		<tabBar :tab="1"></tabBar>

		<!-- 授权登录 -->
		<showModel @cancelFunc='setHome({showMode:false})' v-if='showMode' type='2'></showModel>

		<!-- 分享海报 -->
		<SharePoster v-if='showShareQr' myid=' ' type='1' pageType='0' @closePoster='setHomeShare({showShareQr:false})'>
		</SharePoster>

		<!-- 打开客服 -->
		<view class="mask kefu-box" v-if='showKefu' @click="setHomeKefu({showKefu:false})">
			<view class="box bgwhite flex-box">
				<view @click="call" class="flex">
					<view class="flex-box align-center flex-center">
						<image class="Icon" :src="staticUrl+'/images/jh_up/icon-hotline.png'" mode="aspectFit"></image>
						<text class="size28 bold">热线客服</text>
					</view>
					<!-- <view>{{configJson.serviceTelTime}}</view> -->
				</view>
				<view class="flex">
					<view @click="contact" class="flex-box align-center flex-center">
						<image class="Icon" :src="staticUrl+'/images/jh_up/icon-chat.png'" mode="aspectFit"></image>
						<text class="size28 bold">在线客服</text>
					</view>
					<!-- <view>{{configJson.serviceTelTime}}</view> -->
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="contact" class="btn-contact" v-if='startUp.service_state != 1'></button>
					<!-- #endif -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '../../api/index.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import startPage from '@/components/home/startPage.vue'
	import navBar from '@/components/navBar/navBar.vue'
	import Bannel from '@/components/home/Bannel.vue'
	import tabItem from '@/components/home/tabItem.vue'
	import searchBor from '@/components/home/searchBor.vue'
	import coupon from '@/components/home/coupon.vue'
	import notice from '@/components/home/notice.vue'
	import VideoList from '@/components/home/VideoList.vue'
	import product from '@/components/home/product.vue'
	import adv from '@/components/home/adv.vue'
	import tabs from '@/components/home/tabs.vue'
	import ArticleList from '@/components/home/ArticleList.vue'
	import divider from '@/components/home/divider.vue'
	import fromList from '@/components/home/fromList.vue'
	import textTitle from '@/components/home/textTitle.vue'
	import parseContent from '@/components/home/parseContent.vue'
	import hotZone from '@/components/home/hotZone.vue'
	import seckill from '@/components/home/seckill.vue'
	import groupBuy from '@/components/home/groupBuy.vue'
	import practice from '@/components/home/practice.vue'
	import courseList from '@/components/home/courseList.vue'
	import SharePoster from "@/components/sharePoster.vue"
	import bargain from '@/components/home/bargain.vue'
	import store from '@/components/home/store.vue'
	export default {
		components: {
			startPage,
			navBar,
			Bannel,
			tabItem,
			searchBor,
			coupon,
			notice,
			VideoList,
			product,
			adv,
			tabs,
			ArticleList,
			divider,
			fromList,
			textTitle,
			parseContent,
			hotZone,
			seckill,
			groupBuy,
			practice,
			courseList,
			SharePoster,
			bargain,
			store
		},
		data() {
			return {
				staticUrl: this.staticUrl,
				pageData: [],
				beginData: '',
				cudTime: 3,
				dtime: null,
				showPop: false,
				appId: '', //wxd21e28da137cb6e4
				options: '',
				isShow: false
			}
		},
		onLoad(opt) {
			console.log('opt', opt)
			this.options = opt;
			if (opt.scene) this.Scenein(opt.scene);
			if (Object.keys(opt).length) this.getUser({request: this.options})

			// #ifdef MP-WEIXIN
			const info = uni.getAccountInfoSync();
			if (info) this.appId = info.miniProgram.appId;
			API.user.getOpenid();
			// #endif
			this.startUpFc();
		},
		onShow(){
			// 子组件监听页面onShow
			if(this.$refs.article){ // 文章列表
				this.$refs.article.forEach(obj=>{
					obj.getBlockInfo()
				})
			}
			if(this.$refs.tabs){ // 商品分组-样式三
				this.$refs.tabs.forEach(obj=>{
					if(obj.pageData.style == 3){
						obj.getBlockInfo()
					}
				})
			}
		},

		methods: {
			...mapMutations(['getUser', 'changeTab', 'setHome', 'setHomeShare', 'setHomeKefu', 'setLaunch']),
			diyget() {
				this.$http.get({
					url: '/newdiy/api/v1/diy/get',
					data: {
						front: 1
					}
				}).then(res => {
					if (res.status != 200) return;
					const result = res.data.front_value || [];
					let searchData;
					result.forEach((item, index) => {
						if (item.type == 'header') searchData = item.compCont;
						if (item.type == 'banner') item.searchData = searchData;
					})
					this.pageData = result;

				})
			},

			startUpFc() {
				this.$http.post({
					url: '/zzj_singleSaleApi/startUp',
					data: {
						appid: this.appId,
						pid: this.options.pid || '', // 私域会员id
						way: this.options.w || 1 // 直接搜索1 卡片分享2 朋友圈3 海报分享4 
					}
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg);
					const result = res.data;
					this.beginData = result;
					this.cudTime = result.countdown;
					const obj = {
						bid: res.bid,
						tabBar: res.diy_table_bar.compCont,
						logo: result.logo_img,
						share: result.share,
						nameDefinition: result.nameDefinition,
						withdrawal_rules: result.withdrawal_rules,
						mode: result.mode,
						startUp: result,
						color: res.themeConfig.colorVal1,
						colorVal: res.themeConfig.colorVal2,
						regInfo: result.regInfo
					}
					this.getUser(obj);
					this.diyget();

					uni.setStorageSync('bid', res.bid);
					uni.setStorageSync('shareData', result.share)
					uni.setStorageSync('mode', result.mode ? result.mode : '0');
					uni.setStorageSync('startUp', result);
					getApp().globalData.color = res.themeConfig.colorVal1
					getApp().globalData.color_aid = res.themeConfig.colorVal2
					if (result.startUp != 1) return this.toPage();;
					if (this.launch) {
						this.showPop = true;
						this.setLaunch(false)
					}
					this.dtime = setInterval(() => {
						if (this.cudTime > 1) {
							this.cudTime--;
						} else {
							this.toPage();
						}
					}, 1000)
				})
			},

			toPage() {

				clearInterval(this.dtime);
				this.showPop = false;
				if (!this.options || !this.options.pageType) return;
				if (this.options.share_v_id) {
					uni.setStorageSync('share_v_id', this.options.share_v_id);
					this.getUser({
						share_v_id: this.options.share_v_id
					});
				}
				const {
					pageType
				} = this.options;
				let url;
				if (pageType == 3) { // 参团
					url = '/userPage/group/tuxedo?gid=' + this.options.gid + '&aid=' + this.options.aid + '&group_id=' + this.options.group_id + '&fromShare=1'
				}
				if (pageType == 4) {
					url = '/otherPage/article/artDetail?artId=' + this.options.artId + '&fromShare=1'
				}
				if (pageType == 5) {
					url = '/pages/article/artList?listId=' + this.options.listId + '&fromShare=1'
				}
				if (pageType == 6) {
					url = '/pages/video/video?goodsid=' + this.options.gid + '&classifyId=' + this.options.cid +
						'&fromShare=1'
				}
				if (pageType == 7) { // 单商品特价活动
					url = '/activityPage/bargain_goods/a_single_commodity?act_id=' + this.options.act_id +
						'&fromShare=1'
				}
				if (pageType == 8) { // 单商品团购
					url = '/activityPage/group/singleitemliner?act_id=' + this.options.act_id + '&fromShare=1'
				}
				if (pageType == 9) { // 多商品首页
					url = '/activityPage/bargain_goods/more_goods_page?act_id=' + this.options.act_id + '&fromShare=1'
				}
				if (pageType == 10) { // 分享链接来的 商品详情页（合并版）
					url = '/pages/goods/goods_detail?goodsid=' + this.options.gid + '&fromShare=1'
				}
				if (pageType == 11) { // 素材详情
					url = '/privatePage/material/sourceDetail?mid=' + this.options.mid + '&fromShare=1'
				}
				if (pageType == 12) { // 私域首页
					url = '/privatePage/index/index?fromShare=1'
				}
				if (pageType == 13) { // 素材中心
					url = '/privatePage/material/center?fromShare=1'
				}
				if (pageType == 14) { // 二维码名片
					url = '/privatePage/single/codeCard?fromShare=1'
				}
				if (pageType == 15) { // 门店首页
					url = '/pages/store/storeIndex?shop_id=' + this.options.shop_id + '&fromShare=1'
				}
				if (pageType == 16) { // 跳表单（gid代替，不然后台分享需要新增参数）
					url = '/pages/reserve/formSubmit?ordId=' + this.options.gid + '&fromShare=1'
				}
				if (pageType == 17) { // 跳游戏（cid代替cid，gid代替type,不然后台分享需要新增参数）
					if (this.options.gid == 'default') { //摇一摇
						url = '/otherPage/lottery/shark?cid=' + this.options.cid + '&fromShare=1'
					} else if (this.options.gid == 'marquee') { //跑马灯
						url = '/otherPage/lottery/good_luck?cid=' + this.options.cid + '&fromShare=1'
					} else if (this.options.gid == 'slotMachine') { //老虎机
						url = '/otherPage/lottery/tiger?cid=' + this.options.cid + '&fromShare=1'
					} else if (this.options.gid == 'bigWheel') { //大转盘
						url = '/otherPage/lottery/roulette?cid=' + this.options.cid + '&fromShare=1'
					} else if (this.options.gid == 'blindBox') { // 盲盒
						url = '/otherPage/lottery/blindBox?cid=' + this.options.cid + '&fromShare=1'
					}
				}
				if (pageType == 18) { // 芬霄中心
					url = '/userPage/distributors/fenxiaoCenter?fromShare=1'
				}
				if (pageType == 19) { // 免费领取课程
					url = '/orderPage/coursePay/freeCourse?id=' + this.options.id
				}
				if (pageType == 20) { // 免费领取课程
					url = '/moneyPage/capital/myMoney?fromShare=1'
				}
				if (pageType == 21) { // 课程目录
					url = `/answer/play?goods_id=${this.options.gid}&fromShare=1`
				}
				if (pageType == 22) { // 扫码点餐
					url = `/otherPage/custom/placeOrder?tid=${this.options.tid}&fromShare=1`
				}
				if (pageType == 23) { // 自定义页面(带id)
					url = `/otherPage/custom/index?fromShare=1`
				}

				if (pageType == 30) { //仓库分享
					url = `/warehouse/chick?ids=${this.options.giveId}&userkey=${this.options.userkey}`
				}
				uni.reLaunch({
					url: url
				})
			},

			Scenein(scene) {

				let sceneInfo = decodeURIComponent(scene).split('&');
				let sceneType = {};
				sceneInfo.forEach(item => {
					let pram = item.split("=")
					sceneType[pram[0]] = pram[1]
				})
				let opt = {
					artId: '',
					pageType: '',
					share_v_id: '',
				}

				if (sceneType.gid) opt.artId = sceneType.gid;
				if (sceneType.gid) opt.gid = sceneType.gid;
				if (sceneType.artId) opt.artId = sceneType.artId;
				if (sceneType.p) opt.pageType = sceneType.p;
				if (sceneType.sid) opt.share_v_id = sceneType.sid;
				if (sceneType.pid) opt.share_v_id = sceneType.pid;
				if (sceneType.pid) opt.pid = sceneType.pid // 用于startUp接口
				if (sceneType.w) opt.w = sceneType.w
				if (sceneType.m) opt.mid = sceneType.m // 素材id
				if (sceneType.tid) opt.tid = sceneType.tid // 桌号id
				this.options = opt;
				if (opt.share_v_id) {
					uni.setStorageSync('share_v_id', opt.share_v_id);
					this.getUser({
						share_v_id: opt.share_v_id
					});
				}
				console.log('options', this.options)
				this.getUser({request: this.options})
			},
			contact() {
				if (this.vid) {
					if (this.startUp.service_state == 1) { // 客服系统
						uni.navigateTo({
							url: "/userPage/message/consult"
						})
					} else {
						this.call()
					}
				} else { // 未登录
					this.$store.commit('setHome', {
						showMode: true
					})
				}
			}
		},

		computed: {
			...mapState(['share', 'showMode', 'showShareQr', 'showKefu', 'startUp', 'vid', 'System', 'navHeight',
				'launch'
			]),
			top() { // 搜索图标fixed定位top值
				return this.System.statusBarHeight + this.navHeight / 2 + 'px'
			}
		},
		onShareAppMessage(res) {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: share.imageUrl
			}
		},
		onShareTimeline() {
			let share = this.share;
			return {
				title: share.title,
				imageUrl: share.imageUrl
			}
		},

		// 监听滚动
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.isShow = true
			} else {
				this.isShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 88888;
		background: #FFFFFF;
	}

	.advertising {
		width: 100%;
		height: 100%;
		position: absolute;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.fiexd_bottom {
		width: 160rpx;
		height: 70rpx;
		border-radius: 35rpx;
		position: absolute;
		bottom: 100rpx;
		right: 20rpx;
		background: #FFFFFF;
	}

	.kefu-box {
		overflow-y: auto;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.box {
			padding: 30rpx;
			z-index: 3;
			width: 100%;
			position: fixed;
			width: calc(100% - 60rpx);
			border-radius: 12rpx;
			left: 50%;
			transform: translateX(-50%);

			@keyframes bottom {
				0% {
					bottom: -200rpx;
				}

				100% {
					bottom: calc(130rpx + constant(safe-area-inset-bottom));
					bottom: calc(130rpx + env(safe-area-inset-bottom));
				}
			}

			animation: bottom .2s ease-in-out forwards;

			>view {
				position: relative;

				&:nth-child(2) {
					border-left: 2rpx solid #000;
				}

				.Icon {
					width: 42rpx;
					height: 42rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.search {
		width: 66rpx;
		height: 66rpx;
		border-radius: 50%;
		position: fixed;
		margin-top: -33rpx;
		left: 24rpx;
		z-index: 2000;
	}

	/deep/ .myCut .u-line-progress__line {
		// 我的砍价
		background: linear-gradient(-90deg, #F41C26, #FFA35E);
	}
</style>